<!-- 首页 -->
<template>
	<view class="">
		<view class="" v-if="ver">
			<cs></cs>
		</view>

		<view class="page_box" v-else>

			<!-- 空白页 -->
			<shopro-empty v-if="noNetwork" :emptyData="noNetworkData" @click="onEmptyBtn"></shopro-empty>
			<shopro-empty v-else-if="!hasTemplate" :emptyData="emptyData"></shopro-empty>
			<view v-else class="shopro-selector">
				<!-- 导航栏 -->
				<view class="head_box active" v-if="contentBoxStyle">
					<cu-custom :isBack="true" :showBackIcon="false" :backColor="headerBgColor" :left="`true`">
						<!-- <block slot="leftText">
							<text class="">积分{{userInfo.score || '0'}}</text>
						</block> -->
						<block slot="content">
							<text class="nav-title shopro-selector-rect">首页</text>
						</block>
					</cu-custom>
				</view>
				<view class="content_box" v-if="contentBoxStyle" :style="contentBoxStyle">
					<scroll-view class="scroll-box" scroll-y scroll-with-animation enable-back-to-top>
						<view class="wrapper">
							<view class="banner">
								<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"
									:interval="interval" :duration="duration">
									<swiper-item class="swiper_item video_layer_box"
										v-for="(item, i) in homeData.banner" :key="i" @click="goNext(item)">
										<image :src="item.image_url" v-if="item.resource == 0" class="banner_img"
											mode="aspectFill"></image>
										<video :src="item.video_url" v-if="item.resource == 1" class="banner_img" :autoplay="false"
											controls></video>
										
										<view class="video_layer"></view>
									</swiper-item>
								</swiper>
								<!-- <sh-banner :detail="homeData.banner" :jump="goNext"></sh-banner> -->
							</view>
						</view>
						<view class="common-wrapper">
							<view class="commbox">
								<view class="common-title">
									<view class="title">宣传片</view>
									<navigator url="./task" class="more">更多</navigator>
								</view>
								<view class="common-content video_layer_box margin-top-xs" @click="goNext(homeData.propaganda)">
									<image :src="homeData.propaganda.image_url" v-if="homeData.propaganda.resource == 0"
										class="common_content_img" mode=""></image>
									<video :src="homeData.propaganda.video_url" object-fit="cover"
										v-if="homeData.propaganda.resource == 1" autoplay="true"
										class="common_content_img" controls></video>
									<view class="video_layer"></view>
								</view>
							</view>
						</view>
						<!-- <view class="common-wrapper two">
							<view class="commbox">
								<view class="common-title">
									<view class="title">会员专区</view>
								</view>
								<view @click="goActivity(homeData.activity[0].id, 1)" class="common-content">
									<image :src="homeData.activity[0].image_url" class="activity_img" mode=""></image>
									<view class="info">
										<h3 class="title">{{homeData.activity[0].title}}</h3>
										<p class="line">原价：<span
												class="price">￥{{homeData.activity[0].original_price}}</span></p>
										<p class="line">现价：<span
												class="price dprice">￥{{homeData.activity[0].price}}</span></p>
									</view>
								</view>
							</view>

							
							<view class="commbox">
								<view class="common-title">
									<view class="title">会员福利</view>
								</view>
								<view @click="goActivity(homeData.activity[1].id, 2)" class="common-content">
									<image :src="homeData.activity[1].image_url" class="activity_img" mode=""></image>
									<view class="info">
										<h3 class="title">{{homeData.activity[1].title}}</h3>
										<p class="line">原价：<span
												class="price">￥{{homeData.activity[1].original_price}}</span></p>
										<p class="line">现价：<span
												class="price dprice">￥{{homeData.activity[1].price}}</span></p>
									</view>
								</view>
								<view @click="goActivity(homeData.activity[1].id, 2)" class="common-content">
											<view class="top block">
												<image :src="homeData.activity[1].images_url[0]" class="hot_img" mode=""></image>
												<view class="text">
													景点/民宿/温泉
												</view>
											</view>
											<view class="mid block">
												<image :src="homeData.activity[1].images_url[1]" class="hot_img" mode=""></image>
											</view>
											<view class="btm block">
												<image :src="homeData.activity[1].images_url[2]" class="hot_img" mode=""></image>
											</view>
											<view class="info">
												<h3 class="title">{{homeData.activity[1].title}}</h3>
												<p class="line">原价：<span class="price">￥{{homeData.activity[1].original_price}}</span></p>
												<p class="line">现价：<span class="price dprice">￥{{homeData.activity[1].price}}</span></p>
											</view>
										</view>
							</view>
						</view> -->



						<!-- 更改区域 -->
						<view class="common-wrapper two">
							<!-- 热门路线 -->
							<view class="commbox">
								<view class="common-box">
									<image src="../../static/imgs/logo/hot.png" mode="" class="common-ico"></image>
									<view class="title">热门路线</view>
								</view>
								<!-- 	<view @click="goActivity" class="common-content">
									<image :src="homeData.activity[0].image_url" class="activity_img" mode=""></image>
								</view> -->
								<view @click="goActivity" class="common-content">
									<image :src="homeData.activity[1].image_url" class="activity_img" mode=""></image>
								</view>
							</view>

							<!-- 金卡会员 -->
							<view class="commbox">
								<view class="common-box">
									<image src="../../static/imgs/logo/member.png" mode="" class="common-ico"></image>
									<view class="title">金卡会员</view>
								</view>
								<!-- <view @click="goMember(homeData.activity[1].id, 2)" class="common-content">
									<image :src="homeData.activity[1].image_url" class="activity_img" mode=""></image>
								</view> -->
								<view @click="goMember(homeData.activity[1].id, 2)" class="common-content">
									<image :src="homeData.activity[0].image_url" class="activity_img" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 精选好物 -->
						<view class="common-wrapper third">
							<view class="commbox">
								<view class="common-box">
									<image src="../../static/imgs/logo/good.png" mode="" class="common-ico"></image>
									<view class="title">精选好物</view>
								</view>
								<view class="common-box-img">
									<view class="common-content" @click="goGoods(item.id)"
										v-for="(item, i) in homeData.goods" :key="i">
										<image :src="item.image" class="activity_img" mode=""></image>
									</view>
								</view>

							</view>
						</view>










						<!-- <view class="common-wrapper trio">
							<view class="commbox">
								<view class="common-title">
									<view class="title">精选好物</view>
								</view>
								<view class="common-content">
											<view @click="goGoods(item.id)" class="goods" v-for="(item, i) in homeData.goods" :key="i">
												<image :src="item.image" class="goods_img" mode=""></image>
												<view class="price_box">
													<view>价格</view>
													<view class="price">￥{{item.price}}</view>
												</view>
											</view>
										</view>
								<block v-if="template" v-for="(item, index) in template" :key="index">
									<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'"
										:detail="item.content"></sh-hot-goods>
								</block>
							</view>
						</view> -->
					</scroll-view>
				</view>
				<view class="foot_box"></view>
				<!-- 登录提示 -->
				<shopro-login-modal type="home"></shopro-login-modal>
				<!-- 自定义底部导航 -->
				<shopro-tabbar></shopro-tabbar>
				<!-- 关注弹窗 -->
				<!-- <shopro-float-btn></shopro-float-btn> -->
				<!-- 连续弹窗提醒 -->
				<!-- <shopro-notice-modal v-if="!showPrivacy && showNoticeModal"></shopro-notice-modal> -->
				<!-- 隐私协议 -->
				<!-- #ifdef APP-PLUS -->
				<view class="modal-wrap">
					<shopro-modal v-model="showPrivacy">
						<block slot="modalContent">
							<view class="service-contract-wrap">
								<image class="service-head-img" :src="$IMG_URL + '/imgs/modal/servece_head.png'"
									mode="widthFix"></image>
								<view class="service-title">用户隐私协议概况</view>
								<view class="service-content ">
									感谢您使用Shopro商城，我们非常重视您的个人信息和隐私保护，在您使用服务前，请仔细阅读
									<text style="color: #EAB866;"
										@tap="jump('/pages/public/richtext', { id: 2 })">《Shopro商城隐私协议》</text>
									，我们将会严格按照经您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
								</view>
								<view class="service-tip ">如您同意此条款，请点击“同意”并开始使用我们的产品和服务，我们将尽全力保护您的个人信息安全。</view>
								<view class="btn-box x-c"><button class="cu-btn agree-btn" @tap="Agree">知道了</button>
								</view>
							</view>
						</block>
					</shopro-modal>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import shSearch from './components/sh-search.vue';
	// import shBanner from './components/sh-banner.vue';
	import shBanner from './components/sh-banner-new.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shMenu from './components/sh-menu.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shNav from './components/sh-nav.vue';
	import shUserinfo from './components/sh-userinfo.vue';
	import shGrid from './components/sh-grid.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shOrder from './components/sh-order.vue';
	import shWallet from './components/sh-wallet.vue';
	import cs from '../../components/cs/cs.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';

	// #ifdef H5
	import html2canvas from '@/common/utils/sdk/html2canvas.js';
	let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
	let handle = function(e) {
		e.preventDefault();
	};
	// #endif

	export default {
		components: {
			cs,
			shSearch,
			shBanner,
			shUserinfo,
			shHotGoods,
			shTitleCard,
			shOrder,
			shWallet,
			shMenu,
			shAdv,
			shGrid,
			shCoupon,
			shSeckill,
			shGroupon,
			shRichtext,
			shNav,
			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				headerBgColor: 'transparent',
				bgcolor: '',
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				mode: '',
				showPrivacy: false,
				showNoticeModal: true,
				triggered: false, //下拉刷新
				_freshing: false, //下拉刷新状态
				emptyData: {
					img: this.$IMG_URL + '/imgs/empty/template_empty.png',
					tip: '暂未找到模板，赶快去装修吧~'
				},
				noNetworkData: {
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/empty_network.png',
					tip: '网络连接断开,请刷新重试~',
					pathText: '刷新重试',
					type: 'netWork'
				},
				netEmptyData: {},
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				contentBoxStyle: '',

				homeData: {},
				ver: false,
			};
		},
		created() {
			this.getRichText();
		},
		computed: {
			...mapState({
				initData: state => state.init.initData,
				template: state => state.init.templateData?.home,
				hasTemplate: state => state.init.hasTemplate,
				noNetwork: state => state.init.noNetwork,
				cartNum: state => state.cart.cartNum,
				userInfo: state => state.user.userInfo,
				forceOauth: state => state.user.forceOauth
			}),
			// 页面主体往上移动
			// contentBoxStyle() {
			// 	var StatusBar = this.StatusBar;
			// 	var CustomBar = this.CustomBar;
			// 	try {
			// 		StatusBar = uni.getStorageSync('StatusBar');
			// 		CustomBar = uni.getStorageSync('CustomBar');
			// 	} catch (e) {

			// 	}
			// 	console.log(CustomBar)
			// 	console.log(StatusBar)
			// 	return `margin-top:-${CustomBar}px;overflow: hidden`
			// },
			popupIndex() {
				if (this.initData.popup) {
					return this.initData.popup.content.index;
				}
			},
			info() {
				if (this.initData.info) {
					// #ifndef MP-WEIXIN
					if (this.initData.info && this.initData.info.name) {
						uni.setNavigationBarTitle({
							title: this.initData.info.name
						});
					}
					// #endif
					return this.initData.info;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		
		onLoad(options) {
			let that = this;
			// 分享相关
			console.log('首页分享', options)
			if (1) {
				
				// uni.setStorageSync('increase', options.id)
				let that = this;
				that.$apiBase('givecoupon', {
					id:options.id
				}).then(res => {
					console.log(' res:>> ',res );
					this.$tools(res.msg)
					uni.removeStorageSync('increase');
				});
				
			}
			if (options.share && options.share == 'coupon') {
				uni.navigateTo({
					url: `../app/coupon/detail1?id=${options.id}`
				})
			}
			if (options.share && options.share == 'activityRegist') {
				uni.navigateTo({
					url: `./activityRegist?id=${options.id}`
				})
			}
			// #ifdef APP-VUE
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// 监听设备网络状态变化事件，接口ios市场首次安装网络切换问题
			plus.globalEvent.addEventListener('netchange', function() {
				var nt = plus.networkinfo.getCurrentType(); //网络状态
				if (nt !== plus.networkinfo.CONNECTION_UNKNOW && nt !== plus.networkinfo.CONNECTION_NONE) {
					that.init();
				}
			});
			// #endif
		},
		mounted() {
			// #ifdef H5
			if (uni.getStorageSync('screenShot')) {
				this.screenShotPreviewImage();
			}
			// #endif
			// this.$store.commit('FORCE_OAUTH', false);
			// this.$store.commit('LOGIN_TIP', false);
			this.getData()
			this.getContentBoxStyle()
		},
		onShow() {
			this.$store.commit('CART_NUM', this.cartNum);
			// if (1) {
			
				
			// 	this.$api('givecoupon',{
			// 		id:222
			// 	}).then((result) => {
			// 		console.log(' result:>> ',result );
			// 		uni.removeStorageSync('increase');
			// 	}).catch((err) => {
			// 		console.log('err :>> ', err);
			// 	});
			// }
		},
		methods: {
			getContentBoxStyle() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				try {
					StatusBar = uni.getStorageSync('StatusBar');
					CustomBar = uni.getStorageSync('CustomBar');
					console.log(CustomBar)
					console.log(StatusBar)
					this.contentBoxStyle = `margin-top:-${CustomBar}px;overflow: hidden`
				} catch (e) {
					this.getContentBoxStyle()
				}
				// return `margin-top:-${CustomBar}px;overflow: hidden`
			},
			async getRichText() {
				this.$api('template')
					.then(result => {
						console.log('result111 :>> ', result);

						this.ver = false;
					})
					.catch(err => {
						this.ver = true;
						console.log('err 111:>> ', err);
					});
			},
			...mapMutations(['CART_NUM']),
			...mapActions(['getAppInit', 'getTemplate']),
			// 初始化
			init() {
				return Promise.all([this.getAppInit(), this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
				});
			},
			getData() {
				let that = this;
				that.$apiBase('home', null).then(res => {
					if (res.code === 1) {
						that.homeData = res.data
						console.log('that.homeData', that.homeData)
					}
				});

			},
			goActivity(id, n) {
				// uni.navigateTo({
				// 	url: `../app/coupon/detail1?type=${n}&id=${id}`
				// })
				// 更改部分

				this.$apiBase('detailList', null).then(res => {
					if (res.data.total == 1) {
						let id = res.data.data[0].id;
						uni.navigateTo({
							url: `route-detail?id=${id}`
						})


					} else {
						uni.navigateTo({
							url: 'route'
						})

					}
				})

			},

			// 跳转到会员页面
			goMember() {
				uni.navigateTo({
					url: 'member'
				})
			},
			// 
			goNext(obj) {
				if (obj.resource == 1) {
					return
				}
				if (obj.data_type == 1) {
					// 任务中心
					uni.navigateTo({
						url: `./taskDetails?id=${obj.data_id}`
					})
				}
				if (obj.data_type == 2) {
					uni.navigateTo({
						url: `../app/coupon/detail1?id=${obj.data_id}`
					})
				}
				if (obj.data_type == 3) {
					// 商城 
					uni.navigateTo({
						url: `../goods/detail/index?id=${obj.data_id}`
					})
				}
				// if (obj.data_type == 4) {
				// 	// 积分商城
				// 	uni.navigateTo({
				// 		url: `../goods/detail/index?id=${obj.data_id}`
				// 	})
				// }
				if (obj.data_type == 5) {
					// 活动
					uni.navigateTo({
						url: `./activityRegist?id=${obj.data_id}`
					})
				}
				if (obj.data_type == 6) {
					// 路线详细
					uni.navigateTo({
						url: `./route-detail?id=${obj.data_id}`
					})
				}
				if (obj.data_type == 7) {
					//内部链接
					uni.navigateTo({
						url: `${obj.data_id}`
					})
				}
			},
			goGoods(id) {
				uni.navigateTo({
					url: `../goods/detail/index?id=${id}`
				})
			},
			// 点击无网络按钮
			onEmptyBtn() {
				this.init();
			},

			// 获取轮播背景色
			getbgcolor(e) {
				this.bgcolor = e;
			},

			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// #ifdef APP-PLUS
			// 同意协议
			Agree() {
				plus.runtime.agreePrivacy();
				this.showPrivacy = false;
			},
			// #endif

			// #ifdef H5
			//装修模式屏幕截图
			screenShotPreviewImage() {
				let that = this;
				let div = window.window.document.getElementsByClassName('page_box');
				html2canvas(div[0], {
					x: 0,
					y: 0,
					scrollX: 0,
					scrollY: 0,
					backgroundColor: '#f6f6f6',
					foreignObjectRendering: true,
					allowTaint: false,
					taintTest: true,
					scale: 1,
					width: div[0].offsetWidth,
					height: div[0].offsetHeight,
					useCORS: true //保证跨域图片的显示，如果为不添加改属性， false, 跨域的图片显示灰背景
				}).then(canvas => {    
					let screenShotBase64 = canvas.toDataURL();
					that.$api('uploadBase64', {
						content: screenShotBase64
					}).then(res => { 
						if (res.code === 1) {
							that.$api('dev.asyncDecorateScreenShot', {
								shop_id: uni.getStorageSync('shop_id'),
								image: res.data.url
							});
							uni.removeStorageSync('screenShot');
							uni.removeStorageSync('shop_id');
						}
					});
				});
			}
			// #endif
		}
	};
</script>

<style lang="scss">
	//  首页样式
	.video_layer_box {
		height: 320rpx;
	}

	.activity_img {
		border-radius: 20rpx;
	}

	.wrapper {
		box-sizing: border-box;

		.banner {
			width: 100%;
			height: 560rpx;
			position: relative;
			top: 0;

			.swiper {
				width: 100%;
				height: 560rpx;
			}

			.banner_img {
				width: 100%;
				height: 560rpx;
				object-fit: cover;
			}
		}
	}

	// .common-wrapper.two {
	// 	display: flex;
	// 	justify-content: space-between;

	// 	.commbox {
	// 		width: 340rpx;

	// 		.common-content {
	// 			position: relative;
	// 			height: auto;

	// 			.activity_img {
	// 				width: 340rpx;
	// 				height: 320rpx;
	// 			}

	// 			.info {
	// 				width: 100%;
	// 				height: 130rpx;
	// 				// position: absolute;
	// 				left: 0rpx;
	// 				bottom: 0rpx;
	// 				box-sizing: border-box;
	// 				color: #666;

	// 				.title {
	// 					color: #666;
	// 					font-size: 28rpx;
	// 					font-family: PingFang SC;
	// 					font-weight: 500;
	// 					margin-bottom: 15rpx;
	// 					// &::before {
	// 					// 	content: "";
	// 					// 	display: inline-block;
	// 					// 	width: 25rpx;
	// 					// 	height: 29rpx;
	// 					// 	background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/pos.png') no-repeat;
	// 					// 	background-size: 100% 100%;
	// 					// 	vertical-align: -6rpx;
	// 					// 	margin-right: 16rpx;
	// 					// }
	// 				}
	// 				.line {
	// 					color: #666;
	// 					font-size: 28rpx;
	// 					font-family: PingFang SC;

	// 					// padding: 0 15rpx;
	// 					.price {
	// 						font-weight: bold;

	// 						&.dprice {
	// 							color: #FF8A00;
	// 						}
	// 					}
	// 				}
	// 			}

	// 			.block {
	// 				text-align: center;
	// 				color: #EEEBF1;
	// 				font-size: 30rpx;
	// 				position: relative;

	// 				.text {
	// 					position: absolute;
	// 					left: 0;
	// 					top: 0;
	// 					width: 100%;
	// 					// transform: translate(-50%, -50%);
	// 					height: 100%;
	// 					display: flex;
	// 					justify-content: center;
	// 					align-items: center;
	// 				}

	// 				&.top,
	// 				&.mid {
	// 					height: 106rpx;
	// 					line-height: 106rpx;
	// 				}

	// 				&.btm {
	// 					height: 108rpx;
	// 					line-height: 108rpx;
	// 				}
	// 			}
	// 		}

	// 		.hot_img {
	// 			width: 340rpx;
	// 			height: 106.666666rpx;
	// 		}
	// 	}
	// }

	.common-wrapper.two {
		display: flex;
		justify-content: space-between;

		.commbox {

			.common-box {
				display: flex;
				align-items: center;
				margin-top: 52rpx;

				.common-ico {
					width: 36rpx;
					height: 36rpx;

				}

				.title {
					padding-left: 8rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;

				}
			}

			.common-content {
				width: 330rpx;
				height: 340rpx;
				margin-top: 19rpx;

				.activity_img {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}
	}

	.common-wrapper.third {
		display: flex;
		justify-content: space-between;

		.commbox {
			// width: 330rpx;

			.common-box {
				display: flex;
				align-items: center;
				margin-top: 52rpx;

				.common-ico {
					width: 36rpx;
					height: 36rpx;

				}

				.title {
					padding-left: 8rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;

				}
			}

			.common-content {
				width: 330rpx;
				height: 340rpx;
				margin-top: 19rpx;

				.activity_img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	// .common-wrapper.trio {
	// 	padding: 0;

	// 	.commbox {
	// 		.common-title {
	// 			padding: 0 30rpx;
	// 		}

	// 		.common-content {
	// 			display: flex;
	// 			flex-wrap: wrap;
	// 			padding-bottom: 20rpx;
	// 			height: auto;

	// 			.goods {
	// 				width: 223rpx;
	// 				height: 215rpx;
	// 				background: skyblue;
	// 				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(0, 0, 0, 0.06);
	// 				border-radius: 20rpx;
	// 				margin-left: 10rpx;
	// 				margin-bottom: 20rpx;
	// 				position: relative;
	// 				overflow: hidden;

	// 				&:nth-child(3n+1) {
	// 					margin-left: 0
	// 				}
	// 			}

	// 			.goods_img {
	// 				width: 223rpx;
	// 				height: 215rpx;
	// 			}

	// 			.price_box {
	// 				position: absolute;
	// 				left: 0;
	// 				right: 0;
	// 				bottom: 0;
	// 				height: 60rpx;
	// 				color: #fff;
	// 				padding: 0 20rpx;
	// 				background: rgba(0, 0, 0, .5);
	// 				display: flex;
	// 				justify-content: space-between;
	// 				align-items: center;

	// 				.price {
	// 					color: #FF8A00;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	.common-wrapper {
		box-sizing: border-box;
		padding: 0 30rpx;
		// margin-bottom: 30rpx;

		.common_content_img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.commbox {
			.common-title {
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				// padding: 0 9rpx;
				padding: 52rpx 9rpx 24rpx 9rpx;

				.title {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					font-family: PingFang SC;

					&::before {
						content: "";
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background: #FF8F00;
						border-radius: 50%;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}

				.more {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
					font-family: PingFang SC;

					&::after {
						content: "";
						display: inline-block;
						width: 29rpx;
						height: 30rpx;
						background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/more.png') no-repeat;
						background-size: 100% 100%;
						vertical-align: -3rpx;
						margin-left: 14rpx;
					}
				}
			}

			.common-box-img {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.common-content {
					border-radius: 20rpx;
					width: 330rpx;
					height: 334rpx;
					overflow: hidden;
					// background-color: pink;
				}

			}


		}


	}



	.foot_box {
		height: 1rpx;
		margin-bottom: 150rpx;
	}



	// 标题搜索栏
	.active {
		// 动画时间跟随轮播组件动画时间
		transition: all linear 0.5s;
	}

	// 服务协议
	.modal-wrap {
		/deep/ .cu-modal {
			z-index: 99999;
		}
	}

	.service-contract-wrap {
		background-color: #fff;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 610rpx;
		min-height: 850rpx;
		border-radius: 20rpx;

		.service-title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			line-height: 42rpx;
			background: linear-gradient(180deg, rgba(62, 48, 25, 1) 0%, rgba(109, 80, 40, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 30rpx;
		}

		.service-content {
			text-align: left;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 50rpx;
			padding: 0 40rpx;
		}

		.service-tip {
			text-align: left;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(154, 154, 154, 1);
			line-height: 50rpx;
			padding: 0 40rpx;
		}

		.btn-box {
			padding: 40rpx;

			.cancel-btn {
				width: 248rpx;
				height: 70rpx;
				border: 1rpx solid rgba(234, 182, 99, 1);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(234, 182, 99, 1);
				background-color: #fff;
			}

			.agree-btn {
				width: 300rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(233, 181, 97, 1), rgba(238, 204, 138, 1));
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}

		.ic-hide {
			position: absolute;
			font-size: 50rpx;
			bottom: -100rpx;
			z-index: 11;
			color: #fff;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.head_box {
		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
		}
	}
</style>
